<template>
  <div class="el-main">
    <div class="main-content">
      <div class="greeting">
        <p>欢迎您!祝您今天过得开心!</p>
      </div>
      <div class="tables-info">
        <div v-for="p in goods" :key="p.id" class="table-item">
          <div class="table-item">
            <img :src="p.imageUrl" alt="商品图片" class="table-image">
            <div class="table-details">
              <p>{{ p.userName }}</p>

              <button type="warning" @click="cancelCollect(p.id)">取消收藏</button>
             
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      goods: [{

      }]
    };
  },

  mounted() {
    const info = JSON.parse(localStorage.getItem('user'));
    this.userInfo = info;
    this.getCollectedGoods(); // 确保在获取用户信息后再调用
  },

  methods: {
    async getCollectedGoods() {
      if (!this.userInfo.userName) {
        console.error("用户信息未获取或userName为空");
        return;
      }
      try {
        const response = await this.$http.get(`/shoucanglan/getSByUsername/${this.userInfo.userName}`);
        if (response.status === 200) {
          this.goods = response.data;
          console.log(this.goods); 
        } else {
          console.error("获取收藏商品失败:", response.data);
        }
      } catch (error) {
        console.error("请求收藏商品数据失败:", error);
      }
    },

    async cancelCollect(goodId) {
      try {
        // 确保 goodId 不是 undefined，并且是一个整数
      if (typeof goodId !== 'number') {
        goodId = parseInt(goodId, 10);
        if (isNaN(goodId)) {
          console.error("商品ID无效或未定义");
          return;
        }
      }
        const response = await this.$http.delete(`/shoucanglan/delS/${goodId}`);
        if (response.status === 200) {
          this.goods = this.goods.filter(good => good.id !== goodId);
          this.$message("取消成功")
        } else {
          this.$message.error("取消收藏失败")
          console.error("取消收藏失败:", response.data);
        }
      } catch (error) {
        this.$message.error("取消收藏失败")
        console.error("请求取消收藏数据失败:", error);
      }
    }
  }
}
</script>


<style scoped>

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  margin-bottom: 20px; /* 根据需要调整与表单的距离 */
}


.avatar-uploader {
  margin-bottom: 20px; /* 头像上传区域与表单的间隔 */
  width: 178px;
  height: 178px;
  /* border: 1px dashed #d9d9d9; 
  border-radius: 6px;  */
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; /* 使图标在上传区域内居中 */
   margin-left:22%

}
 

.el-upload {
  border: 1px dashed #0cdc60;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  
}

.avatar-uploader-icon {
  font-size: 28px;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
 
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.table-image {
  width: 100px; /* 或者使用 max-width 来适应不同屏幕尺寸 */
  height: auto;
  display: block; /* 使图片宽度不会超过其容器宽度 */
  margin: 0 auto; /* 居中显示图片 */
}

.main-content {
  text-align: center;
}

/*欢迎您字段 */
.greeting p {
  font-size: 30px;
  margin: 10px 0;
  color: #f1f6f7;
  
}

/*每个座位 */
.tables-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 项目向左对齐 */
  margin-top: 20px;
  font-size: 20px;
  gap: 10px;
}

/*与右边间隔 */
.table-item {
  margin-right: 160px;
}

.table-item:last-child {
  margin-right: 0; /* 重置最后一个项目的右边距 */
}

/*座位字段 */
.table-details {
    color: #99b9e1;
}

</style>



